<template>
  <el-dialog
    :title="title"
    class="add-address-dialog"
    :visible="dialogVisible"
    @close="closeDialog"
    width="600px"
  >
    <div class="address-form-wrapper">
      <el-form
        :model="addressForm"
        :rules="addressFormRules"
        label-position="right"
        label-width="100px"
        ref="addressForm"
      >
      <el-form-item
          label="阳光平台配送编码"
          prop="linkPhone">
          <el-input v-model="addressForm.sunshinePlatHospitalCode" />
        </el-form-item>     
           <el-form-item
          label="配送点编码"
          prop="linkPhone">
          <el-input v-model="addressForm.distributionCode" />
        </el-form-item>     
           <el-form-item
          label="配送点名称"
          prop="linkPhone">
          <el-input v-model="addressForm.distributionName" />
        </el-form-item>

        <el-form-item
          label="联系人"
          prop="linkMan">
          <el-input v-model="addressForm.linkMan" />
        </el-form-item>
        <el-form-item
          label="联系电话"
          prop="linkPhone">
          <el-input :maxlength="11" v-model="addressForm.linkPhone" />
        </el-form-item>
          <el-form-item
          label="邮政编码"
          prop="postalCode">
          <el-input v-model="addressForm.postalCode" />
        </el-form-item>
         <el-form-item
          label="是否默认"
          prop="defaultStatus">
          <el-select
            v-model="addressForm.defaultStatus"
            placeholder="请选择"
          >
            <el-option
              v-for="items in statusData"
              :key="items.value"
              :label="items.label"
              :value="items.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="省"
          prop="provinceCode">
          <el-select
            v-model="addressForm.province"
            placeholder="请选择"
            @change="provinceMethod"
          >
            <el-option
              v-for="items in provinceData"
              :key="items.value"
              :label="items.label"
              :value="items.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          prop="cityCode"
          label="市">
          <el-select
            v-model="addressForm.city"
            placeholder="请选择"
            @change="cityMethod"
          >
            <el-option
              v-for="items in cityData"
              :key="items.value"
              :label="items.label"
              :value="items.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          prop="countyCode"
          label="区">
          <el-select
            v-model="addressForm.county"
            placeholder="请选择"
            @change="countyMethod"
          >
            <el-option
              v-for="items in countyData"
              :key="items.value"
              :label="items.label"
              :value="items.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="详细地址"
          prop="address">
          <el-input v-model="addressForm.address" />
        </el-form-item>
                <el-form-item
          label="备注"
          prop="remarks">
          <el-input v-model="addressForm.remarks" />
        </el-form-item>
      </el-form>
    </div>
    <div
      slot="footer"
      class="dialog-footer">
      <el-button
        type="primary"
        :loading="loading"
        @click="confirmDialog"
      >确定</el-button
      >
      <el-button @click="closeDialog">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import ElSelectArea from '@femessage/el-select-area'
import { phone, realName } from '@const/formValidate'
const validateLocation = (rule, value, callback) => {
  const hasEmpty = value.length === 0 || value.some(item => item.length === 0)
  if (hasEmpty) {
    callback(new Error('请选择地址区域'))
  } else {
    callback()
  }
}

export default {
  name: 'AddAddressDialog',
  components: { ElSelectArea },
  props: {
    title: {
      type: String,
      default: '新增收货地址'
    },
    //
    dialogVisible: {
      type: Boolean,
      default: false
    },
    formData: {
      type: Object,
      default: () => {}
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      officList:[],
      provinceData: [],
      cityData: [],
      countyData: [],
      statusData:[
        {label:'是',
         value:1,
        },
        {label:'否',
         value:0,
        }
      ],
      areaList: {
        provinceCode: '',

        cityCode: '',
        countyCode: ''
      },
      queryArea: '/guoke-deepexi-interface-center/api/v1/mdm/code/area/list', // 省市查询接口
      addressForm: {
        sunshinePlatHospitalCode:'',
        distributionCode:'',
        distributionName:'',
        postalCode:'', 
        remarks:'',
        departName: '',
        linkMan: '',
        linkPhone:'',
        province: '',
        address:'',
        defaultStatus:'',
        
        cityId: '',
        city: '',
        areaId: '',
        area: '',
        detailedAddress: '',
        location: [],
        provinceId: ''
      },
      isadd: true,
      addressFormRules: {
        userName: realName(),
        userPhone: phone(),
        provinceId: [{ required: true, message: '请输入省', trigger: 'change' }],
        cityId: [{ required: true, message: '请输入市', trigger: 'change' }],
        // areaId: [{ required: true, message: '请输入区', trigger: 'change' }],
        detailedAddress: [
          { required: true, message: '请输入详细地址', trigger: 'change' }
        ]
      },
      tableData: this.invoiceData
    }
  },
  watch: {
    formData (val) {
      this.$nextTick(() => {
        if (Object.keys(val).length === 0) {
          this.$refs.addressForm.resetFields()
          this.addressForm.location = []
        } else {
          this.addressForm = { ...val }
          this.getCityList()
          this.getCountyList()
        }
      })
    }
  },
  mounted () {
    this.getDefaultProvinceData()
    // this.editOfficeListMethod()
  },
  methods: {
    // editOfficeListMethod(){
    //    this.$axios({
    //      method:'post',
    //      url:editOfficeList,
    //      params:{
    //       hospitalCode:this.$route.query.hospitalCode,

    //      }
    //    }).then(res=>{
    //      console.log(res,'ffffffffff')
    //    })
    // },
    // 初始化默认获取省的数据
    getDefaultProvinceData () {
      this.$axios({
        method: 'get',
        url: this.queryArea,
        params: {
          countryCode: 'CN'
        }
      })
        .then(res => {
          let result = res.data.payload
          this.provinceData = this.handleData(result)
          // 清空该行下的市和区
        })
        .catch(() => {
          // this.provinceData[0] = []
        })
    },
    // 修改省的数据时，获取市的数据
    provinceMethod () {
      this.addressForm.province = this.provinceData.find(item =>
        Object.is(this.addressForm.provinceId, item.value)
      ).label
      // 清空市、区
      this.addressForm.city = ''
      this.addressForm.cityId = ''
      this.addressForm.area = ''
      this.addressForm.areaId = ''
      if (this.addressForm.provinceId) this.getCityList()
    },
    // 获取市数据的接口调用
    getCityList () {
      this.$axios({
        method: 'get',
        url: this.queryArea,
        params: {
          provinceCode: this.addressForm.provinceId
        }
      })
        .then(res => {
          let result = res.data.payload
          this.cityData = this.handleData(result)
        })
        .catch(() => {
          // this.cityData[this.tableIndex] = []
        })
    },
    // 修改市的数据时，获取区的数据
    cityMethod () {
      this.addressForm.city = this.cityData.find(item =>
        Object.is(this.addressForm.cityId, item.value)
      ).label
      this.addressForm.area = ''
      this.addressForm.areaId = ''
      if (this.addressForm.cityId) this.getCountyList()
    },
    handleData (result) {
      let arr = []
      for (let key in result) {
        arr.push({
          value: [key][0],
          label: result[key]
        })
      }
      return arr
    },
    // 获取区数据的接口
    getCountyList () {
      this.$axios({
        method: 'get',
        url: this.queryArea,
        params: {
          cityCode: this.addressForm.cityId
        }
      })
        .then(res => {
          let result = res.data.payload
          this.countyData = this.handleData(result)
        })
        .catch(() => {})
    },
    countyMethod () {
      this.addressForm.area = this.countyData.find(item =>
        Object.is(this.addressForm.areaId, item.value)
      ).label
    },
    closeDialog () {
      this.$emit('closeDialogConsignee')
    },
    confirmDialog () {
      // 格式化数据为接口格式
      const data = { ...this.addressForm }
      delete data.location
      this.$refs.addressForm.validate(valid => {
        if (valid) {
          this.$emit('confirmDialogYC', data)
        }
      })
    }
  }
}
</script>

<style lang="less">
.add-address-dialog {
  .address-form-wrapper {
    width: 400px;
    margin: auto;

    .el-select-area {
      .select-area-item {
        width: 100px;

        &:last-child {
          margin-right: 0;
        }
      }
    }
  }

  .dialog-footer {
    text-align: center;
  }
}
</style>
